<template>
  <div class="affiliation-page">
    <layout>
      <background class="bg"></background>
      <transition name="fade">
        <article v-if="loaded">
          <div class="main">
            <top :msg="topData"></top>
            <middle :msg="middleData"></middle>
            <bottom :msg="bottomData"></bottom>
            <bottom-articles :msg="bottomArticleData"></bottom-articles>
          </div>
        </article>
        <loading v-else class="page-loading"></loading>
      </transition>
    </layout>
  </div>
</template>

<script>
import request from "@/requests";

import Layout from '@/layout/index';

import Background from '@/components/Background/AffiliationBg.vue';

import Loading from '@/components/Loading/index';

import Top from './top';
import Middle from './middle';
import Bottom from './bottom';
import BottomArticles from './bottomArticles';

export default {
  name: "AffiliationPage",
  data() {
    return {
      indexData: Object,
      loaded: false
    };
  },
  computed: {
    topData() {
      const data = this.indexData;
      return {
        name: data.name,
        topCitedAuthor: data.topCitedAuthor,
        topCoAffiliation: data.topCoAffiliation
      };
    },
    middleData() {
      const data = this.indexData;
      return {
        availableDownload: data.availableDownload,
        averageDownload: data.averageDownload,
        averageCitation: data.averageCitation,
        directionAmount: data.directions.length ?? 0,
        startYear: data.startYear,
        endYear: data.endYear,
        articleAmount: data.publicationNum,
        coAffiliationAmount: data.collaborationAffiliation.length,
        publicationAmount: data.publicationNum,
        directionAmount: data.directions.length,
        citationAmount: data.citationNum
      };
    },
    bottomData() {
      const data = this.indexData;
      return {
        articleByYear: data.publicationYear,
        directions: data.directions,
        coAffiliations: data.collaborationAffiliation
      };
    },
    bottomArticleData() {
      const data = this.indexData;
      return {
        articles: data.newestArticle ?? []
      };
    }
  },
  mounted() {
    this.load();
  },
  watch: {
    '$route' (to, from) {
      if(to.params.id !== from.params.id){
        this.load();
      }  
    }
  },
  methods: {
    init() {
      this.indexData = new Object();
      this.loaded = false;
    },
    load() {
      this.init();
      const id = this.$route.params.id;
      request({
        method: 'get',
        url: `/affiliation/${id}`,
      }).then((res) => {
        this.indexData = res.data.data;
        console.log(this.indexData);
        this.loaded = true;
        document.title = this.$route.meta.title + ' | ' + this.indexData.name;
      }).catch((err) => {
        console.log(err);
      });
    }
  },
  components: {
    Layout,
    Background,
    Loading,
    Top,
    Middle,
    Bottom,
    BottomArticles
  },
};
</script>

<style scoped lang="scss">
.affiliation-page {
  .bg {
    position: fixed;
    z-index: -1;
  }

  article {
    display: flex;
    width: 1280px;
    margin: 40px auto;
    transition: ease-in-out .25s;

    @media screen and (max-width: 1280px){
      width: 995px;
    }

    @media screen and (max-width: 1024px){
      margin: 20px 10px;
      width: auto;
    }

    >.main {
      flex: 1;
      >* {
        margin-bottom: 10px;
      }
    }
  }

  .page-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
